<template>
  <div class="form-page">
    <Card :bordered="false" :dis-hover="true">
      <div class="header-box" slot="title">
        <div class="flex">
          <div>
            <span class="iconfont icon-quanxianguanli"></span>
          </div>
          <div class="title-box">
            <h3 style="height: 22px">{{ bloc.role.name }}</h3>
            <span>{{ bloc.role.description || "暂无相关描述" }}</span>
          </div>
        </div>
        <div>
          <!--          <Button @click="handleOk('formModel')">-->
          <!--            添加人员-->
          <!--          </Button>-->
          <Button ref="edit" style="margin-left: 10px" @click="edit()">
            编辑角色
          </Button>
          <Button
            ref="delete"
            style="margin-left: 10px"
            @click="removeItem(bloc.role)"
          >
            删除角色
          </Button>
        </div>
      </div>
      <div v-for="i in bloc.itemsArr" :key="i.id">
        <div class="title-label">
          <Icon type="md-bookmark" size="20" />
          {{ i.parent.name }}
        </div>
        <CheckboxGroup size="large" class="item-box" v-model="i.value">
          <template v-for="(item, index) in i.data">
            <Checkbox :key="index" :label="item.id">
              <span style="margin-left: 5px">{{ item.name }}</span>
            </Checkbox>
          </template>
        </CheckboxGroup>
      </div>
      <div
        style="
          margin: 20px 0px 35px 25px;
          display: flex;
          justify-content: center;
        "
      >
        <router-link :to="{ path: '/role' }">
          <Button style="width: 100px; height: 40px">返回</Button>
        </router-link>
        <Button
          ref="save"
          type="primary"
          style="margin-left: 30px; width: 100px; height: 40px"
          :disabled="bloc.isDetail"
          @click="handleOk()"
          >保存
        </Button>
      </div>
    </Card>
    <Modal
      title="修改角色信息"
      width="600px"
      :footer-hide="true"
      v-model="roleController.visible"
      :closable="false"
      :mask-closable="false"
      @on-ok="(args) => roleController.resolve(args)"
      @on-cancel="(args) => roleController.resolve(args)"
    >
      <FormRoleModal
        ref="roleForm"
        @on-ok="(args) => roleController.resolve(args)"
        @on-cancel="(args) => roleController.resolve(args)"
      />
    </Modal>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Route } from "vue-router";
import { FormSettingBloc } from "@/view/role/bloc/FormSettingBloc";
import FormRoleModal from "@/view/role/FormRoleModal.vue";
import { Role } from "@/base/model/Role";
import { deleteRole } from "@/base/api/RoleApi";
import { ModalController } from "@/base/util/ModalController";
import { FormRoleBloc } from "@/view/role/bloc/FormRoleBloc";
import { Button } from "view-design";

@Component({
  components: {
    FormRoleModal,
  },
})
export default class FormAddModal extends Vue {
  beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
    next((vm) => {
      vm.bloc.load(vm.idx, vm.isAdd);
    });
  }

  roleController = new ModalController(this);

  $refs!: {
    roleForm: FormRoleModal & {
      bloc: FormRoleBloc;
    };
    delete: Button;
    save: Button;
  };

  get isAdd() {
    return !this.idx;
  }

  get idx() {
    return Number(this.$route.params.id);
  }

  bloc: FormSettingBloc = new FormSettingBloc();

  handleCancel() {
    this.$router.push({ path: `/role` });
  }

  handleOk() {
    this.$refs.save.loading = true;
    this.bloc
      .saveRes(this.idx)
      .then((res) => {
        this.$Message.success("保存成功");
        this.handleCancel();
      })
      .catch((err) => {
        this.$Message.error("出现错误");
      })
      .finally(() => {
        this.$refs.save.loading = false;
      });
  }

  removeItem(dataItem: Role) {
    this.$Modal.confirm({
      title: "提示",
      content: "确认删除后将无法恢复！还要继续吗？",
      okText: "删除",
      cancelText: "取消",
      onOk: () => {
        this.$refs.delete.loading = true;
        deleteRole(dataItem.id)
          .then((value) => {
            this.$Message.success("删除成功");
            this.$router.push({ path: "/role" });
          })
          .catch((e) => {
            this.$Message.error("删除失败");
          })
          .finally(() => {
            this.$refs.delete.loading = false;
          });
      },
    });
  }

  edit() {
    this.$refs.roleForm.bloc.load(this.idx);
    this.roleController
      .request(true)
      .then((value) => {
        this.bloc.load(this.idx, this.isAdd);
        this.roleController.visible = false;
      })
      .catch((e) => {
        console.error(e);
      });
  }
}
</script>

<style lang="less" scoped>
.header-box {
  border-bottom: 1px solid #e8eaec;
  display: flex;
  justify-content: space-between;
  align-self: center;
  padding: 20px 0;
}

h3 {
  color: #666;
}

.icon-quanxianguanli {
  height: 50px;
  width: 50px;
  text-align: center;
  display: inline-block;
  line-height: 50px;
  background: #ff6a00;
  color: #fff;
  font-size: 20px;
  border-radius: 50%;
}

.flex {
  display: flex;
  justify-content: center;
}

.flex > div {
  margin: auto 0;
}

.form-page .ivu-card-body > div {
  text-align: left;
}

.header-box {
  border-bottom: none;
}

.title-label {
  padding: 0 0 10px 0;
  border-bottom: 1px solid #e8eaec;
}

.title-box {
  padding-left: 20px;
}

.item-box > label {
  width: auto;
  margin: 0 35px 15px 0;
}

.item-box {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 25px 35px 0;
}
</style>
